<template>
  <div>
    <el-card>
      <el-input
        style="width: 440px"
        @clear="search"
        size="large"
        clearable
        v-model="searchForm.keywords"
        placeholder="请输入搜索词"
      >
        <template #append>
          <el-button icon="Search" @click="search" />
        </template>
      </el-input>
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        :cell-style="{ 'textAlign': 'center' }"
        :header-cell-style="{ 'textAlign': 'center' }"
      >
        <el-table-column prop="id" label="用户id" width="100" />
        <el-table-column prop="wechat_name" min-width="200" label="微信昵称" />
        <el-table-column prop="avatarurl" label="头像" width="100">
          <template #default="scope">
            <el-avatar :src="scope.row.avatarurl" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="200" />
        <el-table-column prop="phone" label="手机"  min-width="200"/>
        <el-table-column prop="identity_number" label="证件号"  min-width="200"/>
        <el-table-column prop="identity_type" label="证件类型" min-width="100" :formatter="formattertype">
          <!-- <template #default="scope">
            <div>{{identity_type(scope.row.identity_type)}}</div>
          </template> -->
        </el-table-column>
        <el-table-column prop="created_at" min-width="200" label="创建时间" />
        <el-table-column prop="updated_at" min-width="200" label="更新时间" />

        <!-- <el-table-column label="操作" min-width="140" fixed="right">
          <template #default="scope">
            <el-button
            type="primary"
              @click="
                () =>
                  router.push({
                    path: '/user/detail',
                    query: { id: scope.row.id },
                  })
              "
              >详情</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px"
        :current-page="searchForm.current"
        :page-size="searchForm.size"
        :page-sizes="[10, 20, 30, 40]"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script setup>
import Api from "../../api/index";
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

// 用户数据
let tableData = ref([]);
let total = ref(0);
// 搜索条件
const searchForm = reactive({
  current: 1,
  size: 10,
  keywords: "",
});
const typeList = reactive([
        {
          key: 1,
          value: "身份证",
        },
        {
          key: 2,
          value: "港澳台",
        },
        {
          key: 3,
          value: "护照",
        },
        {
          key: 4,
          value: "其他",
        },
      ])// 答题类型
// Dom 挂载之后
onMounted(() => {
  getUserList();
});

// 获取用户列表
const getUserList = async () => {
  let data = {
    page:searchForm.current,
    perPage:searchForm.size,
    keywords:searchForm.keywords
  }
  let res = await Api.getUserList(data);
  tableData.value = res.data.user_info;
  total.value = res.data.total_count;
};
//证件类型格式化
const formattertype = function (row) {
      let type = row.identity_type;
      let text = "";
      typeList.forEach(function (item) {
        if (item.key == type) {
          text = item.value;
        }
      });
      return text;
    }
//改变分页每页显示条数
const handleSizeChange = (size) => {
  searchForm.size = size;
  getUserList();
};
//改变分页页码
const handleCurrentChange = (current) => {
  searchForm.current = current;
  getUserList();
};

//搜索
const search = () => {
  searchForm.current = 1;
  getUserList();
};
// // 删除用户
// const deleteUser = (id) => {
//   ElMessageBox.confirm("确定要删除该用户信息吗?", {
//     confirmButtonText: "确定",
//     cancelButtonText: "取消",
//     type: "warning",
//   })
//     .then(async () => {
//       const res = await Api.delUser({ id: id });
//       if (res.data.success) {
//         ElMessage.success("删除成功");
//         getUserList();
//       } else {
//         ElMessage.error("删除失败");
//       }
//     })
//     .catch(() => {
//       ElMessage({
//         type: "info",
//         message: "取消删除",
//       });
//     });
// };
</script>

<style lang="scss" scoped></style>
